<template>
  <div class="right-content">
    <div class="big-title">模型组件</div>
    <!-- 结果操作 -->
    <div class="result">
      <div class="small-title" @click.prevent="isExpand=!isExpand">
        结果
        <i :class="isExpand?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
      </div>
      <div v-show="isExpand" class="result-content">
        <draggable @end="end" @start="move" v-model="formList" :options="draggableOptions">
          <div class="list-wrap" @click="changeClick" name="结果输出" type="end">
            <div class="list">
              <img src="@/assets/image/out.png" alt />
              <div>结果输出</div>
            </div>
          </div>
        </draggable>
      </div>
    </div>
    <!-- 表单操作 -->
    <div class="result form">
      <div class="small-title" @click.prevent="isExpand2=!isExpand2">
        表单操作
        <i :class="isExpand2?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
      </div>
      <div v-show="isExpand2" class="result-content">
        <draggable @end="end" @start="move" v-model="formList" :options="draggableOptions">
          <div
            v-for="(item,index) in formList"
            :key="index"
            :name="item.name"
            type="center"
            class="list-wrap"
            @click="formClick(item)"
          >
            <div class="list">
              <img :src="item.src" alt />
              <div>{{ item.name }}</div>
            </div>
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import draggable from "vuedraggable";

var mousePosition = {
  left: -1,
  top: -1
};

export default {
  data() {
    return {
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: "tt",
        // 不使用H5原生的配置
        forceFallback: true
        // 拖拽的时候样式
        // fallbackClass: 'flow-node-draggable'
      },
      isExpand: true,
      isExpand2: true,
      formList: [
        {
          name: "添加字段",
          src: require("@/assets/image/add_col.png"),
          tosrc: "@/assets/image/add_col.png",
          viewFoot: "Add"
        },
        // { name: '选择列', src: require('@/assets/image/select_col.png') },
        {
          name: "数据过滤",
          src: require("@/assets/image/filter.png"),
          tosrc: "@/assets/image/filter.png",
          viewFoot: "FilterWord"
        },
        {
          name: "数据去重",
          src: require("@/assets/image/distinct.png"),
          tosrc: "@/assets/image/distinct.png",
          viewFoot: "Removal"
        },
        // { name: '脚本', src: require('@/assets/image/script.png') },
        {
          name: "数据项映射",
          src: require("@/assets/image/polymerization.png"),
          tosrc: "@/assets/image/polymerization.png",
          viewFoot: "DataMap"
        }
      ]
    };
  },
  created() {
    /**
     * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = function(event) {
        // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
        mousePosition.left = event.layerX;
        mousePosition.top = event.clientY - 50;
        event.preventDefault();
        event.stopPropagation();
      };
    }
  },
  methods: {
    changeClick() {
      if (this.$store.state.tree.outPoint) {
        this.$message({
          message: "已存在输出结果",
          type: "warning"
        });
      } else if (this.$store.state.tree.readOnlyFlag) {
        this.$message({
          message: "已采集不允许创建输出结果",
          type: "warning"
        });
      } else {
        const myNode = {
          name: "结果输出",
          type: "end",
          viewFoot: "OutPut",
          flag: false,
          icon: require("@/assets/image/out.png")
        };
        this.$emit("addPointRight", myNode);
      }
    },
    formClick(val) {
      if (
        this.getWrapInfo.dataStructure == "10022" &&
        val.viewFoot === "FilterWord"
      ) {
        this.$message({
          message: "不允许过滤",
          type: "warning"
        });
      } else if (
        this.getWrapInfo.dataStructure == "10022" &&
        val.viewFoot === "Removal"
      ) {
        this.$message({
          message: "不允许去重",
          type: "warning"
        });
      } else if (
        (this.getWrapInfo.assetSourceDialectType == "RESTful(推)" ||
          this.getWrapInfo.assetSourceDialectType == "RESTful(拉)") &&
        val.viewFoot === "Removal"
      ) {
        this.$message({
          message: "不允许去重",
          type: "warning"
        });
      } else {
        const myNode = {
          name: val.name,
          type: "center",
          icon: val.src,
          viewFoot: val.viewFoot,
          flag: false
        };
        this.$emit("addPointRight", myNode);
      }
    },
    // 拖拽开始时触发
    move(evt, a, b, c) {},
    // 拖拽结束时触发
    end(evt, e) {
      let name = evt.item.attributes.name.nodeValue;
      let type = evt.item.attributes.type.nodeValue;
      let node = this.formList.find(item => {
        return item.name === name;
      });
      let myNode = {};
      if (type === "end") {
        if (this.$store.state.tree.outPoint) {
          this.$message({
            message: "已存在输出结果",
            type: "warning"
          });
          return false;
        } else if (this.$store.state.tree.readOnlyFlag) {
          this.$message({
            message: "已采集不允许创建输出结果",
            type: "warning"
          });
          return false;
        } else {
          myNode = {
            name: "结果输出",
            type: "end",
            viewFoot: "OutPut",
            flag: false,
            icon: require("@/assets/image/out.png")
          };
          this.$emit("dragPointRight", evt, myNode, mousePosition);
        }
      } else if (type === "center") {
        if (node) {
          if (
            this.getWrapInfo.dataStructure == "10022" &&
            node.viewFoot === "FilterWord"
          ) {
            this.$message({
              message: "不允许过滤",
              type: "warning"
            });
            return false;
          } else if (
            this.getWrapInfo.dataStructure == "10022" &&
            node.viewFoot === "Removal"
          ) {
            this.$message({
              message: "不允许去重",
              type: "warning"
            });
            return false;
          } else if (
            (this.getWrapInfo.assetSourceDialectType == "RESTful(推)" ||
              this.getWrapInfo.assetSourceDialectType == "RESTful(拉)") &&
            node.viewFoot === "Removal"
          ) {
            this.$message({
              message: "不允许去重",
              type: "warning"
            });
            return false;
          } else {
            myNode = {
              name: node.name,
              type: "center",
              icon: node.src,
              viewFoot: node.viewFoot,
              flag: false
            };
            this.$emit("dragPointRight", evt, myNode, mousePosition);
          }
        }
      }
    },
    // 是否是火狐浏览器
    isFirefox() {
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf("Firefox") > -1) {
        return true;
      }
      return false;
    }
  },
  components: {
    draggable
  },
  computed: {
    ...mapGetters(["getWrapInfo"])
  }
};
</script>

<style lang='scss' scoped>
.right-content {
  padding: 24px 36px 0 36px;
  font-size: 14px;
  color: #727272;
}
// .small-title{
//   font-size: 16px;
//   color: #B7B7B7;
// }
.big-title {
  font-size: 16px;
  color: #494a4c;
  font-weight: 400;
}
.result.form {
  .small-title:before {
    content: "";
    position: absolute;
    width: 46px;
    height: 2px;
    top: 50%;
    background-color: #b7b7b7;
    left: 1%;
  }
  .small-title:after {
    content: "";
    position: absolute;
    width: 46px;
    height: 2px;
    top: 50%;
    background-color: #b7b7b7;
    right: 1%;
  }
}
.result {
  margin-top: 20px;
  .list-wrap {
    cursor: pointer;
    width: 50%;
    text-align: center;
    display: inline-block;
    // display: flex;
    // display: -webkit-flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    img {
      width: 41px;
    }
  }
  .small-title {
    font-size: 16px;
    color: #b7b7b7;
    font-weight: 400;
    position: relative;
    text-align: center;
    margin: 20px 0;
    cursor: pointer;
  }
  .small-title:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 2px;
    top: 50%;
    background-color: #b7b7b7;
    left: 1%;
  }
  .small-title:after {
    content: "";
    position: absolute;
    width: 60px;
    height: 2px;
    top: 50%;
    background-color: #b7b7b7;
    right: 1%;
  }
  .el-icon-arrow-down {
    margin-left: 4px;
  }
}
</style>
